import { Card, Table } from 'antd';
import matrixToGraph from '../lib/matrixToGraph';
import plotNetwork from '../lib/plotNetwork';
import { useEffect, useState } from 'react';
const { Column } = Table;
const { Meta } = Card;
const MyInnerCard = prop => {
  const [loading, setLoading] = useState(true);
  const { matrixAndLabels, networkId, modularity, targetFunction, nodeNum } = prop;
  const [communityNum, setCommunityNum] = useState(0);
  useEffect(() => {
    setLoading(true);
    let child = document.getElementById('container' + networkId);
    child.innerHTML = '';
    const graph = matrixToGraph(matrixAndLabels);
    window.localStorage.setItem('graph', JSON.stringify(graph));
    const { communities } = graph;
    setCommunityNum(communities.length);
    plotNetwork(graph, 'container' + networkId);
    setLoading(false);
  }, [modularity.toFixed(5)]);
  const data = [
    {
      key: networkId,
      nodeNum,
      communityNum: communityNum,
      modularity: targetFunction === '模块度' ? modularity.toFixed(5) : -modularity.toFixed(5),
    },
  ];
  return (
    <>
      <Card
        hoverable
        loading={loading}
        cover={
          <div id="container">
            <div id={'container' + networkId} style={{ width: '100%', height: '350px' }}></div>
          </div>
        }
      >
        <Meta
          description={
            <div>
              <Table dataSource={data} pagination={false} size="small">
                <Column align="center" title="网络序号" dataIndex="key" key="key" />
                <Column
                  align="center"
                  title={targetFunction}
                  dataIndex="modularity"
                  key="modularity"
                />
                <Column align="center" title="集群数" dataIndex="communityNum" key="communityNum" />
              </Table>
            </div>
          }
        />
      </Card>
    </>
  );
};
export default MyInnerCard;
